<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/contact.css"/>
    <title>contact</title>
    <style type="text/css">
        .banner{width: 100%;height: 400px;background: url(assets/img/r.jpg) no-repeat 100% 100%;background-size: 100% 100%;}
        .font{width: 90%;text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .font h1{word-spacing: 20px;letter-spacing: 10px;font-size: 50px;}
        .fontP{text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .forms{width: 90%;margin: 0 auto;}
        .form{background-color: #D6CCC5;text-align: center;display: flex;justify-content: space-around;align-items: center;height: 60px;width: 30%;padding: 0 20px;margin: 30px auto;}
        .form input{border-radius: 5px;display: block;height: 30px;width: 350px;border: none;padding-left: 10px;font-weight: bold;}
        .form button{width: 100px;height: 30px;border-radius: 5px;border: none;background: url(assets/img/button.png) no-repeat 10px 6px;background-size: 15px 15px;background-color: #F19323;font-weight: bold;}
        /* banner完 */
        .rightBox1{height: 160px;background: url(assets/img/banner4i.jpg) no-repeat;background-size: 100% 100%;}
        /* main完 */
        @media screen and (max-width:940px) {
        .form{flex-wrap: wrap;padding: 20px 20px;margin: 0px auto;}
        .fontP{font-size: 15px;padding-top: 0px;}
        .rightBox1{height: 260px;background: url(assets/img/banner4i.jpg) no-repeat;background-size: 100% 100%;}
        }
        @media screen and (max-width:800px){
        .form{width: 40%;padding: 20px 20px;margin: 0px auto;}
        .font{line-height: 50px;padding-top: 10px;}
        .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:650px){
        .form{width: 40%;padding: 20px 40px;margin: 5px auto;}
        .font{line-height: 40px;padding-top: 10px;}
        .font h1{word-spacing: 10px;letter-spacing: 10px;font-size: 40px;}
        .fontP{font-size: 15px;padding-top: 0px;}
        }

    </style>
</head>
<body>
    <div id="bigBox">
        <!--        头部-->
        <div th:replace="pub_head"></div>
        <div class="main">
            <div class="mains center">
                <div class="leftBox">
                    <div class="leftBox1">
                        <div class="title">Contact</div>
                        <form method="post" action="" class="flex">
                            <div>
                                Enter your name:<input type="text" id="name" v-model="name" />
                            </div>
                            <div>
                                Enter your email:<input type="text" id="email" v-model="email" />
                            </div>
                            <div class="txt">
                                Your message here:<textarea id="message" name="message" cols="67" rows="12" v-model="message"></textarea>
                            </div>
                        </form>
                        <button type="button" id="sub">Submit</button>
                    </div>
                </div>
<!--                detail5-->
                <div class="rightBox">
                    <div class="rightBox1">
                        <h4>[[${modules[7].module.name}]]</h4>
                    </div>
                    <div class="box1">
                        <div class="rightTitle1">
                            <h4>[[${modules[7].module.title}]]</h4>
                        </div>
                        <p>[[${modules[7].module.description}]]</p>
                    </div>
                    <div class="box2">
                        <div class="rightTitle2">
                            <h4>[[${modules[8].module.title}]]</h4>
                        </div>
                        <div class="boxs2" th:each="user:${modules[8].banners}" th:onclick="'detailFun('+${user.id}+')'">
                            <div class="boxs2Img"><img th:src="${user.content1}"></div>
                            <div class="boxs2P"><p>[[${user.title}]]</p></div>
                        </div>
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Partner up: The fellowship of fitness</p></div>-->
<!--                        </div>-->
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Best and worst exercises to do when you have a cold</p></div>-->
<!--                        </div>-->
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Yoga for Rheumatoid Arthritis: Stretching Your Stiffness Away</p></div>-->
<!--                        </div>-->
                    </div>
                    <div class="box1">
                        <div class="rightTitle3">
                            <h4>[[${modules[9].module.title}]]</h4>
                        </div>
                        <input type="text" v-model="Archives" placeholder="Seledt Month">
                    </div>
                    <div class="box3">
                        <div class="rightTitle4">
                            <h4>[[${modules[10].module.title}]]</h4>
                        </div>
                        <div class="ul">
                            <ul>
                                <li th:each="l:${modules[10].banners}" th:onclick="'detailFun('+${l.id}+')'"><img th:src="${l.imgUrl1}"></li>
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
                            </ul>
                        </div>
                    </div>
                    <div class="box4">
                        <div class="rightTitle5">
                            <h4>[[${modules[11].module.title}]]</h4>
                        </div>
                        <!--                        detail2-->
                        <div class="ul1">
                            <ul>
                                <li th:each="i:${modules[11].banners}" th:onclick="'detailFun('+${i.id}+')'">[[${i.title}]]</li>
<!--                                <li>>May 2015</li>-->
<!--                                <li>>May 2015</li>-->
<!--                                <li>>May 2015</li>-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--main-->
        <!--        脚部-->
        <div th:replace="pub_footer"></div>
    </div><!--bigBox-->
    <script src="assets/js/js/jquery-1.8.2.min.js"></script>
    <script src="assets/js/js/common.js"></script>
    <script src="assets/js/js/html5zoo.js"></script>
    <script src="assets/js/js/jquery.countuo.min.js"></script>
    <script src="assets/js/js/jquery.js"></script>
    <script src="assets/js/js/wow.min.js"></script>
    <script src="assets/js/js/jquery.waypoints.min.js"></script>
    <script src="assets/utils/index.js"></script>
    <script type="text/javascript">
        /*var one=new Vue({
            el:'#bigBox',
            data:{
                name:'',
                email:'',
                message:'',
                Archives:''
            }
        });*/

        function detailFun(id){
            window.location.href = `cms_detail?id=${id}`;
        }

        $(function () {
            $('#sub').click(function () {
                let name = $('#name').val()
                let email = $('#email').val()
                let message = $('#message').val()
                console.log(name,email,message)
                if(name == ''){
                    alert('请输入昵称')
                    return  false;
                }
                if(!name.match(/^[\u4E00-\u9FA5]{2,4}$/)){
                    alert('请输入正确的昵称！')
                    $("#contact-name").focus();
                    return  false;
                }
                if(email == ''){
                    alert('请输入邮箱');
                    return  false;
                }
                if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
                    alert('邮箱格式错误,请重新输入！')
                    $("#contact-email").focus();
                    return  false;
                }
                if(message == ''){
                    alert('请留言')
                    return  false;
                }
                if(message.length >255 ){
                    alert('留言内容不能超过255位')
                    $("#contact-message").focus();
                    return  false;
                }
                $.ajax({
                    type: "get",
                    url: '/content',
                    data: {
                        name: name,
                        email: email,
                        message: message,
                    },
                    dataType: "json",
                    success: function (data) {
                        // layer.msg(data.msg);
                        //重新加载页面
                        if (data == 1) {
                            setTimeout(function () {
                                alert("留言成功")
                                window.location.reload();
                            }, 2000);
                        }else{
                            alert("留言失败")
                        }
                    }
                });
                return false
            });
        });
    </script>
</body>
</html>
